<template>
    <div v-if="!paymentSuccess" class="payment-container">
        <div class="header"
            :style="{ backgroundColor: paymentType === 'wechat' ? '#07C160' : paymentType === 'jd' ? '#E1251B' : paymentType === 'meituan' ? '#FFC300' : '#1677ff' }">
            <h2>{{ paymentType === 'wechat' ? '微信支付' : paymentType === 'jd' ? '京东支付' : paymentType === 'meituan' ?
                '美团支付' : '支付宝支付' }}</h2>
            <div class="order-info" style="font-size: 16px;">
                <p style="width: 80%;margin: 10px auto;text-align: left;">订单金额：<span class="amount">¥{{ info.totalAmount
                }}</span></p>
                <p style="width: 80%;margin: 10px auto;text-align: left;">订单编号：{{ info.outTradeNo }}</p>

            </div>
        </div>
        <form @submit.prevent="handleSubmit">
            <div class="form-group">
                <label style="margin:10px auto;font-weight: bolder;text-align: center;width: 100%;">支付密码</label>
                <div class="password-input">
                    <div class="password-grid">
                        <input v-for="(item, index) in 6" :key="index" type="password" maxlength="1"
                            v-model="password[index]" @input="handlePasswordInput(index, $event)" class="password-cell"
                            ref="passwordInputs" />
                    </div>
                </div>
            </div>
            <div style="display: flex;width: 100vw;justify-content: center;">
                <button type="submit" class="pay-button">确认支付</button>
            </div>

        </form>
    </div>

    <div v-else class="success-container">
        <div class="success-animation">
            <svg viewBox="0 0 100 100" class="checkmark">
                <circle cx="50" cy="50" r="45" fill="none"
                    :stroke="paymentType === 'wechat' ? '#07C160' : paymentType === 'jd' ? '#E1251B' : paymentType === 'meituan' ? '#FFC300' : '#1677ff'"
                    stroke-width="5" />
                <path fill="none"
                    :stroke="paymentType === 'wechat' ? '#07C160' : paymentType === 'jd' ? '#E1251B' : paymentType === 'meituan' ? '#FFC300' : '#1677ff'"
                    stroke-width="6" stroke-linecap="round" d="M20,50 l20,20 l40,-40" />
            </svg>
        </div>
        <h2 class="success-title">支付成功</h2>
        <p class="success-message">¥{{ info.totalAmount }} 已成功支付</p>
        <div class="success-info">
            <p style="width: 80%;margin: 10px auto;text-align: left;">支付方式: {{ paymentType === 'wechat' ? '微信支付' :
                paymentType === 'jd' ?
                    '京东支付' : paymentType === 'meituan' ?
                        '美团支付' : '支付宝支付' }}</p>
            <p style="width: 80%;margin: 10px auto;text-align: left;">订单编号：{{ info.outTradeNo }}</p>
        </div>
        <button @click="resetPayment" class="back-button">返回</button>
    </div>
</template>

<script>
import axios from "axios";
export default {
    name: 'PaymentPage',
    props: {
        // paymentType: {
        //     type: String,
        //     default: 'alipay',
        //     validator: value => ['alipay', 'wechat', 'jd', 'meituan'].includes(value)
        // }
    },
    data() {
        return {
            info: {},
            // amount: '100.00',
            password: Array(6).fill(''),
            paymentSuccess: false,
            paymentType: 'jd'
        }
    },
    created() {
        //b3V0VHJhZGVObz0xJnRvdGFsQW1vdW50PTImcmV0dXJuVXJsPWh0dHA6Ly93d3cuYmFpZHUuY29tJnBheVR5cGU9amQ=
        // let s = 'outTradeNo=1&totalAmount=2&returnUrl=http://www.baidu.com&payType=jd';
        // 原代码中存在可能导致报错的情况，比如 window.location.search 为空或者不包含 '?'
        // 以下代码添加了对这些情况的检查


        let datainfo = '';
        const search = window.location.search;
        if (search && search.includes('?')) {
            try {
                datainfo = atob(search.split('?')[1]);
                const searchParams = new URLSearchParams(datainfo);
                let params = Object.fromEntries(searchParams);
                this.info = params
                this.paymentType = this.info.payType
                //查找此订单状态是否已支付
                      axios.post(`${window.location.protocol}//${window.location.host}/order/getorder`, {id: this.info.outTradeNo}).then(res => {
                        console.log(res.data.data.status,'res')
                    if(res.data.data.status==2){
                     this.paymentSuccess = true;
                    if (this.info.returnUrl) {
                        alert('订单已支付')
                        setTimeout(() => {
                            window.location.href = this.info.returnUrl; // 跳转到指定的 returnUrl
                        }, 1500);
                    }
                    }
                      })
            } catch (error) {
                console.log(error)
                alert('解码 URL 参数时出错:', error);
            }
        }
    },
    methods: {
        handleSubmit() {
            // 在这里添加支付逻辑，例如调用支付接口
         
            axios.post(`${window.location.protocol}//${window.location.host}/order/successPaid`, {
                outTradeNo: this.info.outTradeNo,
                userId: this.info.userId,
                totalAmount: this.info.totalAmount,
            }).then(res => {
                console.log(res.data, 'res')
                if (res.data.code === 200) {
                    this.paymentSuccess = true;
                    if (this.info.returnUrl) {
                        alert('支付成功')
                        setTimeout(() => {
                            window.location.href = this.info.returnUrl; // 跳转到指定的 returnUrl
                        }, 1500);
                    }
                } else {
                    alert(res.data.message)
                }
            })

            // axios.post(`${window.location.protocol}//${window.location.host}/order/successPaid}`,{
            //     outTradeNo:this.info.outTradeNo,
            //     userId:this.userId,
            //     totalAmount:this.info.totalAmount,
            // }).then(res=>{
            //    console.log(res,'res') 
            // })


            // 模拟支付过程
            // setTimeout(() => {
            //     this.paymentSuccess = true;
            //     if (this.info.returnUrl) {
            //         setTimeout(() => {
            //             window.location.href = this.info.returnUrl; // 跳转到指定的 returnUrl
            //         }, 1000);
            //     }
            // }, 1000);
        },
        resetPayment() {
            this.paymentSuccess = false;
            this.password = Array(6).fill('');
        },
        handlePasswordInput(index, event) {
            if (event.target.value) {
                if (index < 5) {
                    this.$refs.passwordInputs[index + 1].focus();
                } else {
                    // 六位密码输入完成自动提交
                    if (this.password.join('').length === 6) {
                        this.handleSubmit();
                    }
                }
            } else {
                // 处理删除键
                if (index > 0) {
                    this.$refs.passwordInputs[index - 1].focus();
                }
            }
        }
    }
}
</script>



<style scoped>
.payment-container,
.success-container {
    max-width: 100%;
    margin: 0;
    min-height: 100vh;
    background-color: #f5f5f5;
}

input[type="password"]::-ms-reveal {
    display: none;
}

input[type="password"]::-ms-clear {
    display: none;
}

input[type="password"]::-o-clear {
    display: none;
}


.form-group {
    margin-bottom: 25px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

label {
    display: block;
    margin-bottom: 15px;
    font-size: 16px;
    color: #333;
    text-align: center;
}

input {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

input:focus {
    border-color: v-bind('paymentType === "wechat" ? "#07C160" : paymentType === "jd" ? "#E1251B" : paymentType === "meituan" ? "#FFC300" : "#1677ff"');
}

.header {
    background-color: v-bind('paymentType === "wechat" ? "#07C160" : paymentType === "jd" ? "#E1251B" : paymentType === "meituan" ? "#FFC300" : "#1677ff"');
    color: white;
    padding: 25px 15px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header h2 {
    margin: 0;
    font-size: 20px;
}

.order-info {
    margin-top: 15px;
    padding-top: 15px;
    color: #fff !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.order-info p {
    margin: 8px 0;
    font-size: 14px;
}

.amount {
    font-size: 28px;
    font-weight: bold;
}

.password-input {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.password-grid {
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
}

.password-cell {
    width: 50px !important;
    height: 50px !important;
    flex-shrink: 0;
    text-align: center;
    font-size: 24px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: white;
    transition: all 0.3s;
}

.password-cell:focus {
    border-color: v-bind('paymentType === "wechat" ? "#07C160" : paymentType === "jd" ? "#E1251B" : paymentType === "meituan" ? "#FFC300" : "#1677ff"');
    box-shadow: 0 0 0 2px rgba(v-bind('paymentType === "wechat" ? "7, 193, 96" : paymentType === "jd" ? "225, 37, 27" : paymentType === "meituan" ? "255, 195, 0" : "22, 119, 255"'), 0.2);
    outline: none;
}

.pay-button {
    width: 80%;
    padding: 15px;
    background-color: v-bind('paymentType === "wechat" ? "#07C160" : paymentType === "jd" ? "#E1251B" : paymentType === "meituan" ? "#FFC300" : "#1677ff"');
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.pay-button:hover {
    background-color: v-bind('paymentType === "wechat" ? "#05a84c" : paymentType === "jd" ? "#c11a1a" : paymentType === "meituan" ? "#e6b800" : "#1261c4"');
}

@media (max-width: 600px) {
    .payment-container {
        max-width: 100%;

    }

    .password-cell {
        width: 40px;
        height: 50px;
        font-size: 20px;
    }

    .amount {
        font-size: 20px;
    }
}

.success-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.success-animation {
    width: 120px;
    height: 120px;
    margin-bottom: 30px;
    animation: scaleIn 0.5s ease-out forwards;
}

.checkmark {
    width: 100%;
    height: 100%;
}

.success-title {
    font-size: 24px;
    color: v-bind('paymentType === "wechat" ? "#07C160" : paymentType === "jd" ? "#E1251B" : paymentType === "meituan" ? "#FFC300" : "#1677ff"');
    margin-bottom: 15px;
}

.success-message {
    font-size: 18px;
    color: #333;
    margin-bottom: 30px;
}

.success-info {
    background: white;
    padding: 20px;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.success-info p {
    margin: 10px 0;
    font-size: 16px;
    color: #666;
}

.back-button {
    width: 80%;
    padding: 15px;
    background-color: v-bind('paymentType === "wechat" ? "#07C160" : paymentType === "jd" ? "#E1251B" : paymentType === "meituan" ? "#FFC300" : "#1677ff"');
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.back-button:hover {
    background-color: v-bind('paymentType === "wechat" ? "#05a84c" : paymentType === "jd" ? "#c11a1a" : paymentType === "meituan" ? "#e6b800" : "#1261c4"');
}

@keyframes scaleIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    80% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 400px) {
    .password-cell {
        width: 35px;
        height: 45px;
        font-size: 18px;
    }

    .header h2 {
        font-size: 18px;
    }

    .amount {
        font-size: 18px;
    }

    .success-title {
        font-size: 20px;
    }

    .success-message {
        font-size: 16px;
    }

    .success-info {
        padding: 15px;
    }

    .success-info p {
        font-size: 14px;
    }
}
</style>